<template>
  <div class="card-line">
    <!-- <header-title
      title=""
      @fullScreen="handleFullScreen"
    ></header-title> -->
    <div class="subtext">
      {{ `项目建设进展情况（全市开工总套数：${kgzts}套，建成总套数：${jczts}套）` }}
    </div>
    <div class="content">
      <div class="column">
        <div @mouseenter="clearAutoPlay" @mouseleave="setAutoPlay">
          <echarts-view ref="echarts" :options="option" height="200px"></echarts-view>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headerTitle from './headerTitle.vue'
import { echartsView } from '@/components'
import axios from 'axios'
export default {
  name: 'Left3',
  props: {
    areaID: {
      type: String,
      default: '',
    },
  },
  components: {
    headerTitle,
    echartsView,
  },
  mounted() {
    this.fetchData()
  },
  watch: {
    areaID: function () {
      this.fetchData()
    },
  },
  data() {
    return {
      autoPlayer: null,
      kgzts: 0,
      jczts: 0,
      option: {},
    }
  },
  methods: {
    fetchData() {
      const echart1 = axios({
        method: 'get',
        timeout: 180000,
        url: process.env.VUE_APP_API_BASE_URL_BZF + '/api/Statistics/TJFY_XMJCQK',
        params: {
          Userid: 1,
          QY: this.areaID,
          TJ: 'TJ',
        },
      })
      Promise.all([echart1]).then((res) => {
        this.initEchart1(res[0].data.TJinfo)
        this.kgzts = res[0].data.num
        this.jczts = res[0].data.num1
      })
    },
    initEchart1(res) {
      const xAxisData = []
      const mbData = []
      const kgsData = []
      const jcsData = []
      const jclData = []
      res.forEach((i) => {
        const { name, FWCOUNT, FWZT, HX, namemc } = i
        xAxisData.push(name)
        mbData.push(Number(FWCOUNT))
        kgsData.push(Number(namemc))
        jcsData.push(Number(FWZT))
        jclData.push(Number(HX))
      })
      this.option = {
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(44, 222, 221, 1)' }, // 设置颜色渐变
              { offset: 1, color: 'rgba(8, 149, 224, 1)' },
            ],
          },
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              { offset: 0, color: 'rgba(200, 53, 38, 1)' },
              { offset: 1, color: 'rgba(242, 88, 73, 1)' },
            ],
          },
          'rgba(255, 238, 10, 1)',
        ],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: 'rgb(22, 245, 255,.8)',
            },
          },
        },
        grid: {
          left: 0,
          right: 0,
          top: 40,
          bottom: '3%',
          containLabel: true,
        },
        xAxis: [
          {
            type: 'category',
            data: xAxisData,
            axisTick: {
              // 刻度线
              show: false,
            },
            axisLine: {
              // 坐标轴
              show: false,
            },
            splitLine: {
              // 网格线
              show: false,
            },
            axisLabel: {
              fontSize: 20,
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            splitNumber: 4,
            axisTick: {
              // 刻度线
              show: false,
            },
            axisLine: {
              show: false,
            },
            splitLine: {
              // 网格线
              show: false,
              lineStyle: {
                type: 'dashed',
                color: 'rgba(127, 214, 255, 1)',
              },
            },
            axisLabel: {
              fontSize: 20,
            },
          },
          {
            type: 'value',
            min: 0,
            max: 100,
            axisLabel: {
              fontSize: 20,
            },
          },
        ],
        series: [
          {
            name: '目标数',
            type: 'bar',
            data: mbData,
            tooltip: {
              valueFormatter: function (value) {
                return value + '套'
              },
            },
          },
          {
            name: '开工数',
            type: 'bar',
            data: kgsData,
            tooltip: {
              valueFormatter: function (value) {
                return value + '套'
              },
            },
          },
          {
            name: '建成数',
            type: 'bar',
            data: jcsData,
            tooltip: {
              valueFormatter: function (value) {
                return value + '套'
              },
            },
          },
          {
            name: '建成率',
            type: 'line',
            yAxisIndex: 1,
            data: jclData,
            itemStyle: {
              color: '#f36c6c',
            },
            tooltip: {
              valueFormatter: function (value) {
                return value + '%'
              },
            },
          },
        ],
        dataZoom: [
          {
            xAxisIndex: 0, // 这里是从X轴的0刻度开始
            show: false, // 是否显示滑动条，不影响使用
            type: 'slider', // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 7, // 一次性展示多少个。
          },
        ],
      }
      this.$nextTick(() => {
        this.setAutoPlay()
      })
    },
    setAutoPlay() {
      this.clearAutoPlay('setAutoPlay')
      this.autoPlayer = setInterval(() => {
        if (this.option.dataZoom[0].endValue === this.option.series[0].data.length) {
          this.option.dataZoom[0].endValue = 7
          this.option.dataZoom[0].startValue = 0
        } else {
          this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1
          this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1
        }
      }, 3000)
    },
    clearAutoPlay() {
      if (!this.$isEmpty(this.autoPlayer)) {
        clearInterval(this.autoPlayer)
      }
    },
    handleFullScreen() {
      this.$emit('fullScreen')
    },
  },
}
</script>
<style lang="less" scoped>
.card-line {
  height: 260px;
  font-size: 18px;
  margin-right: 50px;
  .content {
    display: flex;
    flex-direction: row;
    height: 200px;
    .column {
      flex: 1;
    }
  }
}
.subtext {
  color: #fff;
  background-color: #0d5b78;
  display: inline-block;
  width: 100%;
  font-size: 20px;
  box-sizing: border-box;
  padding: 5px 10px;
  margin: 6px 0;
}
</style>
